<template>
  <div class="bgbox">
    <div class="headimg"></div>
    <div class="recommendbox">
      <img class="rechead"
           src="../../../assets/images/new/tclbt.png"
           alt="">
      <div class="discountone"></div>
      <div class="discounttwo"></div>
      <div class="discountthr"></div>
    </div>
    <div class="rulebox">
      <!-- <div class="ruletext"></div> -->
      <img class="ruletext"
           src="../../../assets/images/new/tcgz.png"
           alt="">
    </div>
    <div class="btnbox"
         @click="exitCilck">
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import rulePage from '@m/rule/index.vue'
import quitLogin from '@m/quitLogin/index.vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'
// 格式化日期的
import { formatDate } from '@/utils/common'
import userApi from '@/api/mobile_user/index'
import { Toast, Dialog } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'
import { message } from 'ant-design-vue'
import { recordCilck } from '@/utils/record'

export default defineComponent({
  name: 'Login',
  components: { rulePage, quitLogin },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()

    const affirmshow: any = ref(false)
    const state: any = reactive({
      num: 589,
      ruleNum: 59,
      checked: false,
      topTitle: '您将办理59元优享套餐',
      // 您将办理89元畅享套餐
      // 您将办理新业务包
      ticked: '2'
    })
    // 选择套餐
    function setMeal(num) {
      console.log(num, 'ssssssss')
      state.ruleNum = num
      // state.num = num
      if (num == 59) {
        state.topTitle = '您将办理59元优享套餐'
        return
      }
      if (num == 89) {
        state.topTitle = '您将办理89元畅享套餐'
        return
      }
    }
    // 确认办理
    function qrManage() {
      console.log('sssssssss确认办理')
      // affirmshow.value = true
      recordCilck('点击确认办理', '-')
      // 服务厅
      // location.href =
      //   'https://gd.10086.cn/gmccapp/webpage/serviceHall/index.html#/pages/index/index'
    }
    function onClickLeft() {
      router.go(-1)
    }
    function exitCilck() {
      // Storage.remove(MOBILE_TOKEN)
      router.push({
        name: 'weChatActivity'
      })
    }
    // 关闭
    onMounted(() => {
      window.scroll(0, 0)
    })

    return {
      ...toRefs(state),
      affirmshow,
      onClickLeft,
      setMeal,
      qrManage,
      exitCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.bgbox {
  background: url('../../../assets/images/new/tcbg.png') no-repeat;
  background-size: 100% auto;
  background-color: #ab0f08;
  padding-top: 22px;
  padding-bottom: 24px;
  .headimg {
    height: 72px;
    background: url('../../../assets/images/new/tcbt.png') no-repeat;
    background-size: 100% auto;
    margin: 0px 109px;
    margin-bottom: 13px;
  }
  .recommendbox {
    margin: 0px 13px;
    padding: 0px 12px;
    background: url('../../../assets/images/new/tcbgk.png') no-repeat;
    background-size: 100% auto;
    // height: 479px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
    .rechead {
      height: 40px;
      margin-bottom: 21px;
    }
    .discountone {
      background: url('../../../assets/images/new/tc1.png') no-repeat;
      background-size: 100% auto;
      height: 108px;
      width: 100%;
      margin-bottom: 20px;
    }
    .discounttwo {
      background: url('../../../assets/images/new/tc2.png') no-repeat;
      background-size: 100% auto;
      height: 108px;
      width: 100%;
      margin-bottom: 20px;
    }
    .discountthr {
      background: url('../../../assets/images/new/tc3.png') no-repeat;
      background-size: 100% auto;
      height: 146px;
      width: 100%;
      margin-bottom: 20px;
    }
  }
  .rulebox {
    margin: 0px 11px;
    padding: 16px 17px 23px;
    width: 354px;
    height: 228px;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-bottom: 14px;
    overflow: auto;
    .ruletext {
      // overflow: auto;
      // background: url("../../../assets/images/new/tcgz.png") no-repeat;
      // background-size: 100% auto;
      // height: 200px;
      width: 100%;
    }
  }
  .btnbox {
    background: url('../../../assets/images/new/closebtn.png');
    background-size: 100% auto;
    height: 28px;
    margin: 0px 136px;
  }
}

.rulebox::-webkit-scrollbar {
  width: 5px;
}

.rulebox::-webkit-scrollbar-track {
  // background-color: red;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.rulebox::-webkit-scrollbar-thumb {
  background-color: #ab0f08;
}
</style>
